<template>
  <!-- 订单管理页 -->
  <div class="order">
    <!-- 头部 -->
    <div class="header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">所有订单</el-menu-item>
        <el-menu-item index="2">待支付</el-menu-item>
        <el-menu-item index="3">待派单</el-menu-item>
        <el-menu-item index="4">待接单</el-menu-item>
        <el-menu-item index="5">待服务</el-menu-item>
        <el-menu-item index="6">待确认</el-menu-item>
        <el-menu-item index="7">已完成</el-menu-item>
      </el-menu>
    </div>
    <!-- 表格内容 -->
    <div class="table_content">
      <el-table v-loading="loading" stripe :data="orderData" style="width: 100%">
        <!-- 订单编号 -->
        <el-table-column prop="id" label="订单编号" align="center" />
        <!-- 下单时间 -->
        <el-table-column prop="orderTime" label="下单时间" align="center">
          <template slot-scope="scope">{{ scope.row.orderTime | fmtDate_global }}</template>
        </el-table-column>
        <!-- 总价 -->
        <el-table-column prop="total" label="总价" align="center">
          <template slot-scope="scope">
            <div class="money">
              ￥
              <span>{{ scope.row.total }}</span>
              元
            </div>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '待支付'" type="danger">待支付</el-tag>
            <el-tag v-else-if="scope.row.status === '待派单'" type="success">待派单</el-tag>
            <el-tag v-else-if="scope.row.status === '待接单'" type="warning">待接单</el-tag>
            <el-tag v-else-if="scope.row.status === '待服务'" type="info">待服务</el-tag>
            <el-tag v-else-if="scope.row.status === '待确认'" style="color: #6495ed">待确认</el-tag>
            <el-tag v-else-if="scope.row.status === '已完成'" type="info">已完成</el-tag>
          </template>
        </el-table-column>
        <!-- 顾客ID -->
        <el-table-column prop="customerId" label="顾客ID" align="center" />
        <!-- 员工ID -->
        <el-table-column prop="employeeId" label="员工ID" align="center">
          <template slot-scope="scope">{{ scope.row.employeeId?scope.row.employeeId:'--' }}</template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="control">
              <el-button
                class="details"
                type="text"
                size="small"
                @click="orderDetails(scope.row.id)"
              >详情</el-button>
              <el-button
                v-if="scope.row.status === '待派单'"
                class="dispatch"
                type="text"
                size="small"
                style="color: #67C23A"
                @click="sendOrder(scope.row.id)"
              >派单</el-button>
              <el-button
                v-else-if="scope.row.status === '待接单'"
                class="cancel"
                type="text"
                size="small"
                style="color: #F56C6C"
                @click="cancelSendOrder(scope.row.id)"
              >取消派单</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="pageina">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[6, 8,12,16]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 模态框 -->
    <el-dialog title="派单" :visible.sync="dialogVisible">
      <div>
        <el-radio-group v-model="Selectwaiter" size="mini">
          <div>
            <el-radio
              v-for="waiter in WaiterData"
              :key="waiter.id"
              class="radio"
              :label="waiter.id"
              border
            >{{ waiter.username +' '+ waiter.realname }}</el-radio>
          </div>
        </el-radio-group>
      </div>
      <template>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      loading: true,
      // 订单id
      orderId: '',
      data: {},
      Selectwaiter: '1',
      queryData: {},
      // 员工数组
      WaiterData: [],
      dialogVisible: false,
      pageSize: 8,
      currentPage: 1,
      pagetotal: 10,
      activeIndex: '',
      orderData: [],
      sendOrderData: {},
      status: ''
    }
  },
  computed: {},
  created() {
    this.getAllOrderData()
    this.getAllWaiterData()
  },
  mounted() { },
  methods: {
    // 订单详情
    orderDetails(id) {
      this.$router.push({
        path: '/admin/order/Details',
        query: {
          id: id
        }
      })
    },
    // 派单
    async submit() {
      const data = {
        waiterId: this.Selectwaiter,
        orderId: this.orderId
      }
      // console.log(data);
      const res = await get('/order/sendOrder', data)
      // 给用户一个成功的提示
      if (res.status === 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // // 重新刷新页面的数据
        this.handleSelect(this.activeIndex)
        // this.getAllOrderData();
        // 调用关闭模态框的方法
        this.dialogClose()
      } else {
        this.$message.error(res.message)
      }
    },
    // 取消派单
    async cancelSendOrder(id) {
      // console.log({ orderId: id });
      const res = await get('/order/cancelSendOrder', { orderId: id })
      if (res.status === 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.handleSelect(this.activeIndex)
        console.log(this.activeIndex)
        // this.getAllOrderData();
      } else {
        this.$message.error(res.message)
      }
    },

    // 查询所有员工
    async getAllWaiterData() {
      const data = {
        page: 1,
        pageSize: 9999,
        roleId: 1,
        status: '正常'
      }
      // 通过对应的参数发送网络请求
      const res = await get('/baseUser/pageQuery', data)
      this.WaiterData = res.data.list
      // console.log(res);
      // console.log(res.data.list);
    },
    // 派单
    sendOrder(id) {
      this.getAllWaiterData()
      // 显示模态框
      this.orderId = id
      // console.log(id)
      this.dialogVisible = true
    },
    // 分页查询
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getAllOrderData()
    },
    handleCurrentChange(val) {
      // val
      this.currentPage = val
      // 重新调用
      this.getAllOrderData()
      // console.log(`当前页: ${val}`);
    },
    //
    handleSelect(key) {
      switch (key) {
        case '1':
          this.status = ''
          break
        case '2':
          this.status = '待支付'
          break
        case '3':
          this.status = '待派单'
          break
        case '4':
          this.status = '待接单'
          break
        case '5':
          this.status = '待服务'
          break
        case '6':
          this.status = '待确认'
          break
        case '7':
          this.status = '已完成'
          break
      }
      this.getAllOrderData()
    },
    // 关闭模态框
    dialogClose() {
      // 重置表单
      // this.$refs["order_form"].resetFields();
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false
      }, 200)
    },
    // 查询所有订单信息
    async getAllOrderData() {
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize
      }
      if (this.status) {
        console.log(this.status)
        data.status = this.status
      }
      // 通过对应的参数发送网络请求
      const res = await get('/order/pageQuery', { ...data, ...this.queryData })
      // 将data中的产品数组 进行赋值
      this.orderData = res.data.list
      // 页面总数据条数 赋值
      this.pagetotal = res.data.total
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.radio {
  margin: 10px;
  padding: 10px, 10px, 10px, 10px;
}
.money span {
  font-size: 1.5rem;
  color: red;
}
.control {
  position: relative;
  width: 5.5rem;
  display: flex;
  margin: 0 auto;
  padding-left: 0.8rem;
}
</style>
